<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .tab{
            width: 1000px;
            margin:10px auto;
        }
        .top{
            height:30px;
            margin-bottom:5px;
            position:relative;

            color:white;
        }
        #bg{
            width:100%;
            height:30px;
            background:#000000;
            position:absolute;
            left:0px;
            top:0px;
            z-index:-2;
        }
        .top>span{
            display:block;
            min-width: 100px;
            height:30px;
            background:transparent;
            float:left;
            line-height: 30px;
            text-align:center;
        }
        .top>span:nth-of-type(1){
            background-color: red;
        }
        .cnt>div{
            height:400px;
            background:pink;
        }
        .cnt>div:nth-of-type(2){
            background:green;
            display:none;
        }
        .cnt>div:nth-of-type(3){
            background:orange;
            display:none;
        }
        .cnt>div:nth-of-type(4){
            background:mediumpurple;
            display:none;
        }
        #baseline{
            z-index:-1;
            width:70px;
            height:30px;
            background:red;
            position:absolute;
            left:0px;
            transition:all .3s;
        }
    </style>
</head>
<body>
<div class="tab" id="tab">
    <div class="top" id="tou">
        <span class="bottom_border">首页</span><span>国内</span><span>国际</span><span>军事</span><span>财经</span><span>娱乐</span><span>体育</span><span>互联网</span><span>科技</span><span>游戏</span>
        <div id="baseline"></div>
        <div id="bg"></div>
    </div>
</div>
<script>
    var spans = tou.children;
    for(let i=0;i<spans.length;i++){
        if(spans[i].id=="baseline"||spans[i].id=="bg") continue;
        spans[i].onmouseover = function(){
            baseline.style.left = 100*i+"px";
            baseline.style.width = spans[i].clientWidth+"px";
        };
    }
</script>
</body>
</html>